<template>
	<view class="content">
		<view class="editBook" @click="toEdit" v-if="isEditShow">
			<u-icon name="edit-pen" color="#ff341a" size="28"></u-icon>
		</view>
		<view class="top">
			<image mode="widthFix" :src="bookImage">
			</image>
		</view>
		<view class="center">
			<view class="name">{{bookname}}</view>
			<view class="bookinfo" v-if="bookinfo">简介:{{bookinfo}}</view>
			<view class="price">￥{{price}}</view>
			<view class="ibsn">ISBN:{{ISBN}}</view>
		</view>
		<view class="table">
			<view class="charts-box">
				<qiun-data-charts type="tarea" :canvas2d='true' canvasId="uchartsid" :chartData="chartData" background="#fff" />
			</view>
			<view class="flow">近5周价格走势</view>
		</view>
		<view class="bottombar">
			<view class="zhuye" @click="goTopage1">
				<image class="img11" :src="avatar" mode="aspectFill"></image>
			</view>
			<view class="lianxi" @click="goToConnect">
				<view class="iconfont icon-xiaoxi"></view>
				<view class="title">联系</view>
			</view>
			<view class="cart" @click="goTopage2">
				<view class="iconfont icon-gouwuche"></view>
				<view class="title">购物车</view>
			</view>
			<view class="addcart" @click="addCart" v-if="!isEditShow">
				加入购物车
			</view>
			<view class="purchase" @click="Buy" v-if="!isEditShow">
				购买
			</view>
		</view>
		<u-popup :show="show" closeable="true" @close="close" round="10">
			<view class="popup">
				<view class="head">
					确认信息
				</view>
				<view class="user_info_row">
					<view class="user_info">
						<view>{{Address.username}}</view>
						<view>{{Address.all}}</view>
					</view>
					<view class="user_phone">{{Address.telNumber}}</view>
				</view>
				<view class="center">
					<image class="imggg" mode="aspectFit" :src="bookImage">
					</image>
					<view class="col">
						<view class="name">{{bookname}}</view>
						<view class="bookinfo" v-if="bookinfo">简介:{{bookinfo}}</view>
						<view class="price">￥{{price}}</view>
						<view class="ibsn">ISBN:{{ISBN}}</view>
					</view>
				</view>
				<view class="btnn" @click="submit">
					提交订单
				</view>
			</view>
		</u-popup>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				id: '',
				userId: '',
				username: '',
				bookname: '',
				bookImage: '',
				bookinfo: '',
				ISBN: '',
				price: '',
				avatar: '',
				originAvatar: '',
				chartData: {
					categories: ["04-03", "04-10", "04-17", "04-24", "05-01"],
					series: [{
						name: "最高价",
						data: [36, 29, 33, 29, 34]
					}, {
						name: "最低价",
						data: [16, 18, 13, 10, 24]
					}]
				},
				show: false,
				Address: '',
				isEditShow: false
			}
		},
		onLoad() {
			this.init()
		},
		components: {},
		methods: {
			async init() {
				try {
					const page = await getCurrentPages()
					let x = page.length - 1
					let ImgUrl = getApp().globalData.ImgUrl
					let options = page[x].options
					this.userId = options.userId
					this.id = options.id
					this.getBookInfo()
					// this.getPriceScope()
					if (this.userId == uni.getStorageSync('userinfo').id) {
						this.isEditShow = true
					}
				} catch (res) {
					// console.log(res)
				}
			},
			async getPriceScope() {
				let BaseUrl = getApp().globalData.BaseUrl
				let token = uni.getStorageSync('token');
				await uni.request({
					url: BaseUrl + '/saleBook/priceFlow',
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					data: {
						saleBookId: this.id
					},
					success: (res) => {
						// console.log("priceflow", res)
						this.chartData.categories = Object.keys(res.data.data).reverse()
						this.chartData.categories.forEach((item,index)=>{
							this.chartData.categories[index]=item+"    "
						})
						// this.chartData.categories.unshift(" ")
						// this.chartData.categories.push(" ")
						for (let i = 0; i < 5; i++) {
							this.chartData.series[0].data[i] = res.data.data[Object.keys(res.data.data)[i]]
								.maxPrice == null ? 1 : res.data.data[Object.keys(res.data.data)[i]]
								.maxPrice
							this.chartData.series[1].data[i] = res.data.data[Object.keys(res.data.data)[i]]
								.minPrice == null ? 1 : res.data.data[Object.keys(res.data.data)[i]]
								.minPrice
						}
					}
				})
			},
			async getBookInfo() {
				let id = Number(this.id)
				let userId = Number(this.userId)
				let ImgUrl = getApp().globalData.ImgUrl
				let BaseUrl = getApp().globalData.BaseUrl
				let token = uni.getStorageSync('token');
				await uni.request({
					url: BaseUrl + '/saleBook/detail',
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					data: {
						userId: userId,
						saleBookId: id
					},
					success: (res) => {
						// console.log("bookinfo", res)
						let data = res.data.data
						this.bookname = data.bookName
						this.username = data.username
						this.bookImage = ImgUrl + data.bookImage
						this.ISBN = data.ibsn
						this.price = data.price
						this.bookinfo = data.bookInfo
						this.avatar = ImgUrl + data.avatar
						this.originAvatar = data.avatar
					}
				})
			},
			goTopage1() {
				uni.navigateTo({
					url: '/pages/Personal/Personal?userId=' + this.userId + '&avatar=' + this.originAvatar +
						'&username=' + this.username
				})
			},
			goTopage2() {
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},
			goToConnect() {
				uni.navigateTo({
					url: '../xiaoxi/chatDetail?toId=' + this.userId + '&toName=' + this.username + '&toAvatar=' +
						this.originAvatar
				})
			},
			toEdit() {
				uni.navigateTo({
					url: './editBook?bookName=' + this.bookname + '&IBSN=' + this.ISBN + '&price=' +
						this.price + '&bookInfo=' + this.bookinfo + '&bookImage=' + this.bookImage + '&id=' + this
						.id
				})
			},
			async addCart() {
				let BaseUrl = getApp().globalData.BaseUrl
				let token = uni.getStorageSync('token');
				await uni.request({
					url: BaseUrl + '/cart/add',
					method: "POST",
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					data: JSON.stringify({
						saleBookId: this.id
					}),
					success: (res) => {
						// console.log(res)
						if (res.data.code === 903) {
							uni.showToast({
								title: "购物车中已存在!",
								icon: "error"
							})
						} else if (res.data.code === 200) {
							uni.showToast({
								title: "添加成功!"
							})
						}
					}
				})
			},
			async Buy() {
				let address = await uni.getStorageSync('address')
				let Address = {}
				Address.all = address.all
				Address.username = address.userName
				Address.telNumber = address.telNumber
				this.Address = Address
				this.show = true
			},
			async submit() {
				// console.log(this.Address)
				if (!this.Address.all) {
					uni.showToast({
						title: "前往选择收获地址",
						icon: "none",
						success: () => {
							uni.navigateTo({
								url: '/pages/adress/adress'
							})
						}
					})
					this.show = false
					return;
				} else {
					let BaseUrl = getApp().globalData.BaseUrl
					let token = uni.getStorageSync('token');
					let selectedBook = [this.id]
					await uni.request({
						url: BaseUrl + '/order/create',
						method: "POST",
						header: {
							'Content-Type': 'application/json',
							'token': token
						},
						data: {
							"address": JSON.stringify(this.Address),
							"saleBookIds": selectedBook
						},
						success: (res) => {
							// console.log(res)
							this.show = false
							uni.navigateTo({
								url: '/pages/orders/orders'
							});
						},
					})
				}

			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.editBook {
			position: absolute;
			top: 0;
			right: 0;
			border-radius: 50%;
			background-color: #888;
			box-shadow: 0 0 10upx #888;
		}

		.top {
			width: 95%;
			height: 500upx;
			background-color: #888;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 10upx #888888;
			border-radius: 20upx;
			overflow: hidden;
			margin-top: 15upx;
		}

		.center {
			position: absolute;
			top: 520upx;
			left: 60upx;

			.name {
				font-size: 36upx;
				font-weight: bold;
			}

			.price {
				position: relative;
				top: 5upx;
				color: tomato;
				font-size: 38upx;
				font-weight: bold;
			}
		}

		.table {
			position: relative;
			top: 230upx;

			.charts-box {
				width: 95%;
				height: 300upx;
			}

			.flow {
				position: relative;
				left: 30%;
				// transform: translate(-50%);
			}
		}

		.bottombar {
			// margin-top: 120upx;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 100upx;
			background-color: #fff;
			box-shadow: 0 0 15upx #888;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.zhuye {
				position: absolute;
				left: 20upx;

				.img11 {
					border-radius: 50upx;
					width: 70upx;
					height: 70upx;
				}
			}

			.lianxi {
				position: absolute;
				left: 110upx;

				.title {
					position: relative;
					top: -2upx;
					font-size: 25upx;
				}
			}

			.cart {
				position: absolute;
				left: 330upx;

				.title {
					position: relative;
					top: -2upx;
					left: -10upx;
					font-size: 25upx;
				}
			}

			.addcart {
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				height: 60upx;
				width: 180upx;
				background-color: red;
				position: absolute;
				left: 435upx;
				border-top-left-radius: 30upx;
				border-bottom-left-radius: 30upx;
			}

			.purchase {
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				height: 60upx;
				width: 130upx;
				background-color: tomato;
				border-top-right-radius: 30upx;
				border-bottom-right-radius: 30upx;
				position: absolute;
				left: 610upx;
			}
		}

		.popup {
			height: 600upx;
			background-color: #fff;

			.head {
				position: relative;
				left: 50%;
				font-weight: bold;
				transform: translateX(-50%);
				width: 130upx;
				margin-top: 20upx;
				margin-bottom: 30upx;
			}

			.user_info_row {
				display: flex;
				padding: 20rpx;
				background-color: #d3dedc;
				border-radius: 30upx;
				box-shadow: 0 0 10upx #888;

				.user_info {
					flex: 5;
				}

				.user_phone {
					flex: 3;
					text-align: right;
				}
			}

			.center {
				position: absolute;
				top: 320upx;
				left: 40upx;
				display: flex;

				.imggg {
					width: 200upx;
					height: 200upx;
					box-shadow: 0 0 10upx #888;
				}

				.col {
					margin-left: 30upx;

					.name {
						font-size: 36upx;
						font-weight: bold;
					}

					.price {
						font-size: 38upx;
						font-weight: bold;
					}
				}
			}

			.btnn {
				position: absolute;
				bottom: 12upx;
				right: 15upx;
				color: #fff;
				font-size: 32upx;
				padding: 8upx 20upx;
				background-color: red;
				border-radius: 48upx;
			}
		}
	}
</style>
